<!-- 滑块内容 -->
<template>
	<view class="course-item" :class="{column:isColumn}">
		<!-- 左边图片区域 -->
		<view class="item-left">
			<image class="course-img" :src="item.mainImage" lazy-load></image>
			<view class="course-time">
				{{item.totalTime}}
			</view>
		</view>
		<!-- 右边文字区域 -->
		<view class="item-right column">
			<view class="title">{{item.title}}</view>
			<view class="info">
				<view class="nickname iconfont icon-laoshi2">{{item.nickName}}</view>
				<view class="count">
					<view v-if="!item.isFree" class="money iconfont icon-moneybag">
						{{item.priceDiscount || item.priceOriginal}}
					</view>
					<view v-else class="money">
						免费
					</view>
					<view class="iconfont icon-video">{{item.studyTotal}}人在学</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			isColumn: {
				type: Boolean,
				default: false
			},
			item: {
				type: Object,
				default: () => ({
					id: 1,
					mainImage: '../../static/images/banner1.jpg',
					totalTime: '00:59:08',
					title: 'SpringBoot项目实战教程SpringCloud OAuth2 Vue分布式微服务架构',
					nickName: '陈小欢1', // 课程老师
					isFree: 0, //是否免费：0收费，1免费
					priceOriginal: 999, // 原价
					priceDiscount: 699.9, // 优惠价
					studyTotal: 899
				})
			}
		}
	}
</script>

<style lang="scss">
	.course-item {
		display: flex;
		// 纵向排列
		// flex-direction: column;
		width: 100%;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f1f1f1;

		.item-left {
			position: relative;
			width: 290rpx;
			height: 160rpx;

			.course-img {
				width: 290rpx;
				height: 160rpx;
				border-radius: 10rpx;
			}

			.course-time {
				position: absolute;
				bottom: 5rpx;
				right: 5rpx;
				font-size: 22rpx;
				color: #fff;
				background: rgba(51, 51, 51, 0.4);
				border-radius: 20rpx;
				padding: 0 8rpx;
			}
		}

		.item-right {
			justify-content: space-between;
			height: 160rpx;
			padding-top: 5rpx;
			padding-left: 5rpx;

			.title {
				max-width: 365rpx;
				height: 70rpx;
				line-height: 35rpx;
				font-size: 28rpx;
				font-weight: bold;
				// 显示两行,超出部分用...代替固定写法
				overflow: hidden; //超出隐藏
				text-overflow: ellipsis; //超出部分显示省略号
				-webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元素的排列方式 纵向
				white-space: normal; //空白会被浏览器忽略		
			}

			.info {
				.nickname {
					font-size: 23rpx;
					color: #999;
				}

				.count {
					display: flex;
					align-items: center; //垂直居中

					.iconfont {
						font-size: 23rpx;
						color: #222222;
					}

					.money {
						width: 130rpx;
						color: $mxg-color-orange;
						font-size: 28rpx;
						padding-right: 30rpx;
						align-self: flex-end;
					}
				}
			}
		}

	}
</style>
